<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/rightbar.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
    <div class="head-note">风险提示：近期有不法分子以商品质量为由，致电客户主动要求退款，套取卡号及密码，诈骗钱财，请您保持警惕，保护好个人信息，谨防诈骗。</div>

<!-- 顶部     -->
<div class="head-top-wrap">
    <div class="head-top"> 

        <div class="top-left">
            <a href="index.html" target="_blank">邮乐首页</a>
        </div>

        <div class="top-right">
            <div class="welcome"><span>xxx</span>您好，欢迎来到邮乐网！<em>退出</em></div>
            <div class="login">
                <a href="login.html" class="blue t-login">[请登录]</a>
                <a href="register.html" class="blue t-reg">[免费注册]</a>
            </div>
            <div ></div>

            <div class="myul menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">我的邮乐</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">我的订单</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的收藏</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的消息</a></li>
                </ul>
            </div>

            <div class="ulephone menu dropdown" data-active="menu">
                <span class="ico-phone"></span>
                <a class="txt-down dropdown-toggle" target="_blank">手机邮乐</a>
                <div class="uleapp dropdown-layer dropdown-left">
                    <div class="img-wrap">
                        <img src="images/uleapp.jpeg" alt="手机邮乐">
                    </div>
                </div>
            </div>

            <!-- 全部商品分类 -->
            <div class="category">
                <span class="icon_list"></span>
                <a href="list.html" target="_blank">全部商品分类</a>
            </div>
            <div class="allCategory" id="allCategory" >
                <div class="allCategory_box">
                    <ul class="allCategory_main clear">
                    <li>
                        <h4> 
                            <a>美妆洗护</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>美发护发</a><a>面部护肤</a><a>女性护理</a><a>香水彩妆</a><a>口腔护理</a><a>香水</a><a>身体护理</a><a>洗浴用品</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>女装、饰品、配件</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>帽子</a><a>衬衫</a><a>连衣裙</a><a>针织衫毛衣</a>
                            <a>短外套</a>
                            <a>文胸</a>
                            <a>女袜</a>
                            <a>丝巾/围巾/手套</a>
                            <a>镶嵌饰品</a>
                            <a>金银饰品</a>
                            <a>戒指</a>
                            <a>耳饰</a>
                            <a>项链</a>
                            <a>手镯手链</a>
                            <a>头饰/胸针</a>
                            <a>太阳镜/眼镜框</a>
                            <a>手表</a>
                            <a>女士腰带</a>
                            <a>男士腰带</a>
                            <a>T恤</a>
                            <a>打底衫</a>
                            <a>卫衣</a>
                            <a>小西装</a>
                            <a>风衣/大衣</a>
                            <a>羽绒服</a>
                            <a>牛仔裤</a>
                            <a>休闲裤</a>
                            <a>打底裤/短裤</a>
                            <a>半裙</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>女士内裤</a>
                            <a>吊带/背心</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>家居生活</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>家纺</a>
                            <a>生活日用</a>
                            <a>家纺日用</a>
                            <a>家居用品</a>
                            <a>五金装潢</a>
                            <a>家装建材</a>
                            </p>
                        </li>
                        <li>
                            <h4> 
                                <a>汽车用品</a> 
                                <a class="more">more</a> 
                            </h4>
                            <p>
                                <a>行车记录仪</a>
                                <a>润滑油</a>
                                <a>座垫/座套</a>
                                <a>维修配件</a>
                                <a>内饰</a>
                                <a>脚垫</a>
                                <a>除味</a>
                                <a>美容</a>
                                <a>添加剂</a>
                                <a>4S服务</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>特色美食</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>休闲零食</a>
                            <a>饮料冲调</a>
                            <a>冲调食品</a>
                            <a>厨房调料</a>
                            <a>酒</a>
                            <a>特供礼盒</a>
                            <a>进口食品</a>
                            <a>营养滋补</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>魅力男装</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>衬衫</a>
                            <a>T恤/POLO衫</a>
                            <a>牛仔裤</a>
                            <a>夹克/外套</a>
                            <a>男士内裤</a>
                            <a>休闲裤</a>
                            <a>西装</a>
                            <a>棉服</a>
                            <a>羽绒服</a>
                            <a>西裤</a>
                            <a>针织衫</a>
                            <a>毛背心</a>
                            <a>卫衣</a>
                            <a>大衣/皮衣</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>男袜</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>厨房清洁</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>清洁剂</a>
                            <a>清洁工具</a>
                            <a>一次性用品</a>
                            <a>锅具水壶</a>
                            <a>精美餐具</a>
                            <a>生活用纸</a>
                            <a>厨具</a>
                            <a>水具酒具</a>
                            <a>浴室用品</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>手机数码</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>手机通讯</a>
                            <a>手机配件</a>
                            <a>摄影摄像</a>
                            <a>数码配件</a>
                            <a>数码影音</a>
                            <a>智能设备</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>进口食品</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>进口乳制品</a>
                            <a>进口饼干糕点</a>
                            <a>进口糖果/巧克力</a>
                            <a>进口果干/蜜饯</a>
                            <a>进口食用油</a>
                            <a>进口冲饮/早餐谷物</a>
                            <a>进口冲饮咖啡/茶</a>
                            <a>进口饮用水/饮料</a>
                            <a>进口休闲零食</a>
                            <a>进口米/面</a>
                            <a>进口调味品</a>
                            <a>进口罐头</a>
                            <a>进口酒类</a>运动户外
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>箱包鞋帽</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>功能箱包</a>
                            <a>时尚女包</a>
                            <a>精品男包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>电脑办公</a> 
                            <a class="more">商务礼品</a> 
                        </h4>
                        <p>
                            <a>电脑整机</a>
                            <a>电脑硬件</a>
                            <a>外设产品</a>
                            <a>网络设备</a>
                            <a>游戏设备</a>
                            <a>办公设备</a>
                            <a>文具/耗材</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>家用电器</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>个人护理电器</a>
                            <a>厨房电器</a>
                            <a>生活电器</a>
                            <a>大家电</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>保健品</a>  
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>增强免疫力/抗疲劳</a>
                            <a>减肥瘦身</a>
                            <a>调节血压/血脂/血糖 </a>
                            <a>养生参茸食材 </a>
                            <a>美容养颜 </a>
                            <a>男/女性调养 </a>
                            <a>儿童营养 </a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>运动户外</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>母婴玩具</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                                <a>奶粉</a>
                                <a>尿裤湿巾</a>
                                <a>玩具书籍</a>
                                <a>哺喂用品</a>
                                <a>洗护用品</a>
                                <a>宝宝服饰</a>
                                <a>儿童服饰</a>
                                <a>童车童床</a>
                                <a>妈妈用品</a>
                                <a>出行用品</a>
                                <a>图书音像</a>
                        </p>
                    </li>
                </ul>
                <p class="allCategory_side">
                    <a >邮乐农品</a>
                    <a class="s2">手机充值</a>
                    <a>生活缴费</a>
                    <a class="s2">海外馆</a>
                </p>
                </div>
            </div>

            <div class="web-map">
                <a href="" target="_blank">网站地图</a>
            </div>

            <div class="helpcenter menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">帮助中心</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="" target="_blank" class="menu-item">购物指南</a></li>
                    <li><a href="" target="_blank" class="menu-item">支付帮助</a></li>
                    <li><a href="" target="_blank" class="menu-item">配送方式</a></li>
                    <li><a href="" target="_blank" class="menu-item">售后服务</a></li>
                    <li><a href="" target="_blank" class="menu-item">关于邮乐</a></li>
                </ul>
            </div> 

            <div class="telphone">
                <span class="phone">11185</span>
                <p class="phonetips"></p>
            </div>
        </div>
    </div>
</div>

<!-- 头部 -->
<div class="header">
    <div class="head-logo">
        <a href="" class="logo-ule">邮乐网</a>
    </div>   
    <div class="de-head-search">
        <form id="headerSearch">
          <input type="hidden">
          <input type="hidden" name="srcid">
          <input type="hidden" name="storeId">
          <input type="text" name="keywords" class="txt-keyword" style="color: rgb(153, 153, 153);">
          <input type="hidden"class="receivePro">
          <button type="submit" class="btn-search">搜索</button>
          <button type="submit" class="btn-searchstore">搜索本店</button>
        </form>
        <p class="search-hotkeys">
            <span>相关搜索：</span> 
            <a href="###" target="_blank">精准扶贫</a> 
            <a href="###" target="_blank">中国集邮</a> 
            <a href="###" target="_blank">新鲜水果</a> 
            <a href="###" target="_blank">奶粉</a> 
            <a href="###" target="_blank">潮流女鞋</a> 
            <a href="###" target="_blank">洗发护发</a> 
            <a href="###" target="_blank">剃须刀</a> 
            <a href="###" target="_blank">坚果炒货</a> 
            <a href="###" target="_blank">纸巾</a> </p>
      </div>
</div>

<div class="storeheader">
    <div class="storehead">
    </div>
</div>

<div class="storebanner"></div>

<!--中间  -->
<div class="de-body">
    <div class="vi-crumbs">
        <a href="index.html">首页</a>&nbsp;&gt;&nbsp;
        <a href="###">家居生活</a>&nbsp;&gt;&nbsp;
        <a href="###">家纺布艺</a>&nbsp;&gt;&nbsp;
        <a href="###">居家鞋/家居服</a>&nbsp;&gt;&nbsp;
              远港 女士棉拖鞋冬季情侣居家居室内厚底保暖家用秋冬毛绒拖鞋冬天YG-1113
    </div>

    <div class="de-box">
        <div class="goods-show">
            <!-- <div class="big-img">  
                <a href="###">
                    <img id="proImg" class="proImg" src=""> -->
                    <!-- 遮罩层 -->
                    <!-- <span></span>   -->
                    <!-- 利用布局解决span闪烁的问题，配合css -->
                    <!-- <p></p>  -->
                <!-- </a>
            </div>
            <div class="b_box">
                <img src="images/goodspic/fangda101.jpg" alt="">
            </div>
            <div id="spec-list" class="no_center">
                <div class="spec-items">
                    <ul class="lh">
                        <li class="">
                            <img src="">
                        </li>
                        <li class="">
                            <img src="">
                        </li>
                    </ul> 
                </div>
            </div> -->
        </div>
        <div class="goodsDetails">
            <!-- <h1>远港 女士棉拖鞋冬季情侣居家居室内厚底保暖家用秋冬毛绒拖鞋冬天YG-1113</h1>
            <div class="proDetail">
                <div class="sendTimeTip">国庆节期间，此商品<b>10</b>月<b>1</b>日后的订单将在<b>10</b>月<b>9</b>日后发货</div>
            </div>
            <div class="pi_detail">
                <div class="goodsNumber">
					<span class="good-id">商品号 </span>
					<span id="itemId">445182003</span>
                </div>
                <div class="productPrice">
                    <span class="goods-price">价格</span>
                    <div class="price">
                        <span>￥</span>
                        <strong id="priceId">19.90</strong>
                        <del>286.00</del>
                        <div class="maxPrice-intro">
                            <span class="icon"></span>
                        </div>
                    </div>        	
                </div>
                <div class="sendArea">
                    <span class="send-ps">配送</span>
                    <div class="item-place">
                        <div class="fArea">
                            <span>
                            浙江省金华市</span>至
                        </div>
                        <div class="ule_address"></div>
                        <span class="item_fee_box_top">
                            <span class="c-red">&nbsp;商家承担运费</span>
                        </span>
                    </div>
                </div>
                <div class="proDetail_service">
					<span class="fuwu">服务 </span>
					<div class="beizhu">本商品由邮乐网<a href="###"><span>聚耀服饰专营店</span></a>提供<br>并进行相关配送和售后等服务。</div>
				</div>
            </div>
            <div class="proDetail_spec">
                <dl class="colorCubeHolder">
                    <dt>颜色</dt>
                    <dd>
                        <ul>
                            <li>
                                <a class="colorCube">
                                    <img src="">
                                </a>
                            </li>
                            <li>
                                <a class="colorCube">
                                    <img src="">
                                </a>
                            </li>
                            <li>
                                <a class="colorCube">
                                    <img src="">
                                </a>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl class="attrCubeHolder">
                    <dt>规格</dt>
                    <dd>
                        <ul>
                            <li>
                                <a class="attrCube">36-37</a>
                            </li>
                            <li>
                                <a class="attrCube">38-39</a>
                            </li>
                            <li>
                                <a class="attrCube">42-43</a>
                            </li>
                            <li>
                                <a class="attrCube">44-45</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
                <dl class="attrQuantity">
                    <dt>数量</dt>
                    <dd>
                        <span class="reduceQuantity">-</span>
                        <input type="text" class="textField pCount" name="pCount" id="pCount" value="1">
                        <span class="addQuantity">+</span>
                        <span class="minNumberMsg">(库存490件)</span> 
                        <p class="limit_msg"></p>
                    </dd>
                </dl>
            </div>
            <div class="detail_purchase">
                <div class="addtocart">
                    <a class="btn_exchange">立即购买</a>
                    <a class="btn_add2cart">加入购物车</a> 
                    <a class="add2fav02">收藏</a>
                </div>
            </div>
            <div class="goods_info_bottom">
                <div class="goods_info_bottom_l">
                    <div class="emsdate">本商品支持邮乐卡支付</div>
                    <div class="seven-day">服务承诺 &nbsp;&nbsp;
                        <span>支持7天无理由退货</span>
                            </div>
                    <div class="send-tips">周六、周日不支持发货</div>			
                </div>			
            </div> -->
        </div>
    </div>
</div>








<!-- 底部 -->
<div class="footer-wrap">
    <div class="footer">
        <div class="foot-banner">
            <a class="foot-banner-post">中国邮政</a>
            <a class="foot-banner-tom">TOM</a>
            <a class="foot-banner-commitment">品质保障 优选邮乐</a>
            <a class="foot-banner-free">覆盖城乡 安全速达</a>
        </div>

        <div class="foot-helper">
            
        </div> 

        <div class="foot-license">
            <ul>
                <li>酒类商品零售许可证：浦市监酒零字 第 JY13101150070309-JL 号</li>
                <li>食品经营许可证：JY13101150070309</li>
                <li>统一社会信用代码：913100006916203638</li>
            </ul>
        </div>
        <div class="foot-copyright">
            <a style="color:#999">沪公网安备 31011502009005号</a>
            <span class="sep">|</span>
            沪ICP备 13037728号
            <span class="sep">|</span>
            (沪)网械平台备字[2020]第00009号
            <span class="sep">|</span>
            Copyright 2009-2020, 版权所有上海邮乐网络技术有限公司 ULE.COM
        </div>
        <div class="foot-iconlink">
            <a><b>中国邮政</b></a> 
            <a><b>TOM</b></a>
            <a><b>可信网站</b></a>
            <a><b>EMS</b></a>
            <a><b>中国邮政储蓄银行</b></a>
            <a><b>不良信息举报中心</b></a> 
            <a><b>上海网警网络110</b></a>
            <a><b>上海工商</b></a>
            <a><b>诚信网站</b></a>
        </div>

    </div>
</div>

<!-- 右边长条 -->
<div class="bar-wrap">
    <div class="rightBar">
        <!-- 上面两个 -->
        <div class="topTwo">
            <div class="bar-one bar-tab">
                <div class="bar-item bar-category">
                    <span class="bar-logo">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">商品分类</span>
                </div>
            </div>
            <div class="bar-two bar-tab">
                <div class="bar-item bar-qrcode">
                    <span class="bar-logo">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">二维码</span>
                </div>
            </div>
        </div> 
        <!-- 中间四个 -->
        <div class="centerFour">
            <div class="bar-three bar-tab">
                <div class="three-my bar-item">
                    <span class="bar-logo" style="display:block;">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">我的邮乐</span>
                </div>
            </div>
            <div class="bar-four bar-tab">
                <a href="cart.html">
                    <div class="four-cart bar-item">
                        <span class="bar-logo" style="display:block;">
                            <i></i><em>0</em>
                        </span>
                        <span class="bar-tips">购物车</span>
                    </div>
                </a>
            </div>
            <div class="bar-five bar-tab">
                <div class="five-money bar-item">
                    <span class="bar-logo" style="display:block;">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">优惠券</span>
                </div>
            </div>
            <div class="bar-six bar-tab"> 
                <div class="six-foot bar-item">
                    <span class="bar-logo">
                        <i></i><em>0</em>
                    </span>
                    <span class="bar-tips">我的足迹</span>
                </div>
            </div>            
        </div>
        <!-- 底部 -->
        <div class="bar-tab bar-bottom" style="display: block;" status="show">
            <div class="bar-item gotop">
                <span class="bar-logo" style="display:block;">
                    <i></i><em></em>
                </span>
                <span class="bar-tips">回到顶部</span>
            </div>
        </div></div>
    </div>
</div> 



<script src="js/jquery.2.2.4.js"></script>
<script src="js/commodity-list.js"></script>
<script src="js/drop-down menu.js"></script>
<script src="js/index.js"></script>
<script src="js/ajax2.0.js"></script>
<script src="js/cookie.js"></script>

<script>




class details{
    constructor(){
        this.box = document.querySelector(".de-box");
        this.url = "http://localhost:8080/api";
 
        // 开启ajax
        this.load();
 
        this.addEvent();
    }
    addEvent(){
        var that = this;
        //共同的，事件委托，给共同的父级cont
        this.box.addEventListener("click",function(eve){
            alert("成功加入购物车")
            if(eve.target.className === "btn_add2cart"){
                that.id = eve.target.getAttribute("data-index");
                // console.log(this.id);
                //存储数据
                that.storeData();
            }
        })   
    } 
    storeData(){
            // 先获取数据
            this.data = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
 
            // 只使用一条数据，goodsMsg：[{id:id,num:1},{id:id,num:1},...]
            // 如果是第一次使用，直接添加
            if(this.data.length < 1){
                this.data.push({
                    id:this.id,
                    num:1
                })
            }else{
                // 不是第一次，要先读取数据
                let i = 0;
                // 检测是否有重复数据
                let repeat = this.data.some((value,index)=>{
                    i = index;
                    return value.id === this.id;
                })
                if(repeat){
                    // 有，增加对应数据的num
                    this.data[i].num++;
                }else{
                    // 没有，增加商品对象 
                    this.data.push({
                        id:this.id, 
                        num:1
                    })
                }
            }
                    
            // ***最后一定要将数据存回到本地存储***
            setCookie("goodsMsg",JSON.stringify(this.data));           
        }
        load(){
            $.ajax({
                url:this.url,
                data:{
                    type:"goods"
                },
                success:res=>{
                    console.log(res);
                    // this.res = JSON.parse(res);
                    let i;
                    res.some((item,idx) => {
                        i = idx;
                        // 详情页，在获取到所有商品数据后，解析url后拼接的数据，做出比对，一致，就是要渲染的商品数据
                        return item.goodsId === location.search.split("=")[1];
                    });

                    // console.log(res[i]);
                    // 图片
                    $(".goods-show").html(`
                    <div class="big-img"> 
                        <a href="###">
                        <img id="proImg" class="proImg" src="images/goodspic/${res[i].url.Img1}">
                        <span></span>  
                        <p></p>  
                        </a>
                    </div>
                    <div class="b_box">
                        <img src="images/goodspic/${res[i].fangda.bigimg1}" alt="">
                    </div>
                    <div id="spec-list" class="no_center">
                        <div class="spec-items">
                            <ul class="lh">
                                <li class="">
                                    <img src="images/goodspic/${res[i].url.pho1}">
                                </li>
                                <li class="">
                                    <img src="images/goodspic/${res[i].url.pho2}">
                                </li>
                            </ul>
                        </div>
                    </div>`);

                    //商品
                    $(".goodsDetails").html(`
                    <h1>${res[i].name}</h1>
                    <div class="proDetail">
                        <div class="sendTimeTip">国庆节期间，此商品<b>10</b>月<b>1</b>日后的订单将在<b>10</b>月<b>9</b>日后发货</div>
                    </div>
                    <div class="pi_detail">
                        <div class="goodsNumber">
                            <span class="good-id">商品号 </span>
                            <span id="itemId">${res[i].goodsnumber}</span>
                        </div>
                        <div class="productPrice">
                            <span class="goods-price">价格</span>
                            <div class="price">
                                <span>￥</span>
                                <strong id="priceId">${res[i].d_price}</strong>
                                <del>${res[i].o_price}</del>
                                <div class="maxPrice-intro">
                                    <span class="icon"></span>
                                </div>
                            </div>        	
                        </div>
                        <div class="sendArea">
                            <span class="send-ps">配送</span>
                            <div class="item-place">
                                <div class="fArea">
                                    <span>${res[i].area}</span>至
                                </div>
                                <div class="ule_address"></div>
                                <span class="item_fee_box_top">
                                    <span class="c-red">&nbsp;商家承担运费</span>
                                </span>
                            </div>
                        </div>
                        <div class="proDetail_service">
                            <span class="fuwu">服务 </span>
                            <div class="beizhu">本商品由邮乐网<a href="###"><span>${res[i].shop_name}</span></a>提供<br>并进行相关配送和售后等服务。</div>
                        </div> 
                    </div>
                    <div class="proDetail_spec">
                        <dl class="colorCubeHolder">
                            <dt>颜色</dt>
                            <dd>
                                <ul>
                                    <li>
                                        <a class="colorCube">
                                            <img src="images/goodspic/${res[i].you.pic1}">
                                        </a>
                                    </li>
                                    <li>
                                        <a class="colorCube">
                                            <img src="images/goodspic/${res[i].you.pic2}">
                                        </a>
                                    </li>
                                    <li>
                                        <a class="colorCube">
                                            <img src="images/goodspic/${res[i].you.pic3}">
                                        </a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="attrCubeHolder">
                            <dt>规格</dt>
                            <dd>
                                <ul>
                                    <li>
                                        <a class="attrCube">36-37 </a>
                                    </li>
                                    <li>
                                        <a class="attrCube">38-39</a>
                                    </li>
                                    <li>
                                        <a class="attrCube">42-43</a>
                                    </li>
                                    <li>
                                        <a class="attrCube">44-45</a>
                                    </li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="attrQuantity">
                            <dt>数量</dt>
                            <dd>
                                <span class="reduceQuantity">-</span>
                                <input type="text" class="textField pCount" name="pCount" id="pCount" value="1">
                                <span class="addQuantity">+</span>
                                <span class="minNumberMsg">(库存${res[i].store}件)</span> 
                                <p class="limit_msg"></p>
                            </dd>
                        </dl>
                    </div>  
                    <div class="detail_purchase">
                        <div class="addtocart">
                            <a class="btn_exchange">立即购买</a>
                            <a class="btn_add2cart" data-index="${res[i].goodsId}">加入购物车</a> 
                            <a class="add2fav02">收藏</a>
                        </div>
                    </div>
                    <div class="goods_info_bottom">
                        <div class="goods_info_bottom_l">
                            <div class="emsdate">本商品支持邮乐卡支付</div>
                            <div class="seven-day">服务承诺 &nbsp;&nbsp;
                                <span>支持7天无理由退货</span>
                                    </div>
                            <div class="send-tips">周六、周日不支持发货</div>			
                        </div>			
                    </div>`);

                    // 切记，一定要在数据请求成功之后，页面渲染结束后，再去做附加功能：放大镜，加入购物车，点击效果.....
                    new BigImg();
                },
                dataType:"json"
            })
        }
    }
    new details(); 






    // 放大镜
 
    // OOA:分析：放大镜，假的，真实是图片的等比例跟随移动
    // OOD+OOP：
    
    class BigImg{
        constructor(){
            // 1. 选择元素
            this.sBox = document.querySelector(".big-img");
            this.span = document.querySelector(".big-img a span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
    
            // 小图片框的宽高
            this.sBw = this.sBox.offsetWidth;
            this.sBh = this.sBox.offsetHeight;
    
            //绑定事件
            this.addEvent();
        }
        addEvent(){
            var that = this; //通过that找到事件源
    
            //鼠标进入
            this.sBox.onmouseover = function(){
                // 显示放大镜和右边的放大框
                that.span.style.display = "block";
                that.bBox.style.display = "block";
    
                //进入之后完善布局 元素显示之后，才能使用js获取元素的尺寸
                // 3. 完善布局
                that.init();
            }
    
            //鼠标离开
            this.sBox.onmouseout = function(){
                // 隐藏放大镜和右边的放大框
                that.span.style.display = "none";
                that.bBox.style.display = "none";
            }
    
            //鼠标移动
            this.sBox.onmousemove = function(eve){
                //移动时，要找的鼠标的坐标，所以要做一个事件对象
                var e = eve || window.event;
                // 4. 跟随鼠标移动
                that.move(e)
            }
        }
        move(e){ 
            // 计算鼠标移动的距离
            // 事件目标：触发事件的元素
            //鼠标要放在中间，所以除以2
            var l = e.offsetX - this.span.offsetWidth/2;
            var t = e.offsetY - this.span.offsetHeight/2; 
            
            // 边界限定
            // 左边
            if(l<0) l=0;
            // 上边
            if(t<0) t=0;
            // 右边  框的宽-span的宽= 剩余left
            if(l>this.sBw-this.span.offsetWidth) 
            l=this.sBw-this.span.offsetWidth;
            // 下边  框的高 - span的高 = 剩余的top 
            if(t>this.sBh-this.span.offsetHeight) 
            t=this.sBh-this.span.offsetHeight;
    
            // 设置span的位置
            this.span.style.left = l + "px";
            this.span.style.top = t + "px";
    
            // 计算左边span移动的比例
            let x = l / (this.sBw-this.span.offsetWidth)
            let y = t / (this.sBh-this.span.offsetHeight)
            // console.log(x,y)
    
            // 根据比例计算，右侧大图要移动的距离
            //大小走的方向要相反，因此要加-
            this.bImg.style.left = -(this.bImg.offsetWidth - this.bBox.offsetWidth) * x + "px";
            this.bImg.style.top = -(this.bImg.offsetHeight - this.bBox.offsetHeight) * y + "px";
        }
        init(){
            //得到比例 
            let scaleW = this.bImg.offsetWidth / this.bBox.offsetWidth;
            let scaleH = this.bImg.offsetHeight / this.bBox.offsetHeight;
    
            //放大镜的宽和高
            this.span.style.width = this.sBox.offsetWidth / scaleW + "px";
            this.span.style.height = this.sBox.offsetHeight / scaleH + "px";
        }
    } 
    
    new BigImg();









</script>

</body>
</html>